import { Loader } from '@/shared/ui/Loader';
import cn from 'classnames';
import { useWindowSize } from 'usehooks-ts';

import cs from './CourseInformation.module.scss';

export const CourseInformationLoader = () => {
  const { width } = useWindowSize();
  const height = width > 768 ? 42 : 24;
  const borderRadius = width > 768 ? 8 : 4;
  return (
    <>
      <div className={cs.gap}>
        <Loader borderRadius={borderRadius} height={height} />
        <Loader borderRadius={borderRadius} height={height} width={320} />
        <Loader borderRadius={borderRadius} height={height} width={112} />
      </div>

      <Loader borderRadius={100} height={40} width={60} />
      <div className={cs.gap}>
        <Loader borderRadius={borderRadius} height={20} />
        <Loader borderRadius={borderRadius} height={20} />
        <Loader borderRadius={borderRadius} height={20} width={40} />
      </div>
      <div className={cs.book}>
        <div className={cn(cs.loader, cs.image)} />
        <div className={cn(cs.loader, cs.image)} />
      </div>
      <div className={cs.gap}>
        <Loader borderRadius={12} height={height} />
        <Loader borderRadius={12} height={height} width={320} />
        <Loader borderRadius={6} height={height} width={112} />
      </div>
      <div className={cs.gap}>
        <Loader borderRadius={12} height={height} />
        <Loader borderRadius={12} height={height} width={320} />
        <Loader borderRadius={6} height={height} width={112} />
      </div>
    </>
  );
};
